<template>
  <div class="search-box">
    <input
      type="text"
      class="search-input"
      placeholder="搜索商品..."
      v-model="keyword"
      @keyup.enter="performSearch"
    />
    <button class="search-btn" @click="performSearch">
      <SvgIcon type="search" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcon from './SvgIcon.vue'

const keyword = ref('')
const router = useRouter()

const performSearch = () => {
  if (keyword.value.trim()) {
    router.push({
      path: '/search',
      query: { keyword: keyword.value.trim() },
    })
  }
}
</script>

<style scoped lang="scss">
.search-box {
  display: flex;
  height: 48px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .search-input {
    flex: 1;
    padding: 0 20px;
    border: none;
    outline: none;
    font-size: 16px;
  }

  .search-btn {
    width: 80px;
    background: linear-gradient(to right, #ff4e50, #f9d423);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;

    &:hover {
      opacity: 0.9;
    }

    &:active {
      transform: scale(0.95);
    }

    .svg-icon {
      color: white;
      font-size: 20px;
    }
  }
}
</style>
